<template>
    <div class="mod-shop-notice">
        <div class="search-bar">
            <el-form :inline="true" class="search-form" ref="searchForm" :model="searchForm" size="small">
                <div class="input-row">
                    <el-form-item prop="title" label="月份:" class="search-form-item">
                        <el-input type="text" v-model="searchForm.months" maxlength="3" placeholder="请输入查询月份"></el-input>
                    </el-form-item>
                    <el-form-item prop="type" label="是否连续包月:" class="search-form-item">
                        <el-select v-model="searchForm.isRenew" placeholder="请选择">
                            <el-option v-for="item in monthly" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="status" label="是否显示:" class="search-form-item">
                        <el-select v-model="searchForm.isHide" placeholder="请选择">
                            <el-option v-for="item in showHide" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <div class="default-btn primary-btn" @click="searchChange(true)">{{ $t('product.search') }}</div>
                        <div class="default-btn" @click="resetSearchForm('searchForm')">{{ $t('product.reset') }}</div>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <div class="main-container">
            <div class="operation-bar">
                <div class="default-btn primary-btn" v-if="isAuth('platform:notice:save')" @click="addOrUpdateHandle()">
                    {{ $t('sysManagement.add') }}
                </div>
            </div>
            <div class="table-con notice-table">
                <el-table ref="noticeListTable" :data="dataList" :header-cell-style="{ 'text-align': 'center' }"
                    :cell-style="{ 'text-align': 'center' }" header-cell-class-name="table-header"
                    row-class-name="table-row-low" style="width: 100%">
                    <el-table-column
                      prop="months"
                      label="月数"
                    ></el-table-column>

                    <el-table-column
                      prop="energyValue"
                      label="能量值">
                        <template slot-scope="scope">
                            <span class="table-cell-text">{{ scope.row.energyValue }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="isRenew" label="是否连续包月">
                        <template slot-scope="scope">
                            <span class="tag-text" v-if="scope.row.isRenew == 0">否</span>
                            <span class="tag-text" v-if="scope.row.isRenew == 1">是</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="renewValue" label="连续包月能量值">
                        <template slot-scope="scope">
                            <span class="tag-text">{{ scope.row.renewValue }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="isHide" label="是否隐藏">
                        <template slot-scope="scope">
                            <el-switch
                                v-model="scope.row.isHide"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="0"
                                active-text="显示"
                                :inactive-value="1"
                                inactive-text="隐藏"
                                @change="isHide(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>

                    <el-table-column prop="remark" label="备注">
                        <template slot-scope="scope">
                            <span class="tag-text">{{ scope.row.remark }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" align="center" :label="$t('publics.operating')" width="300" prop="id">
                        <template slot-scope="scope">
                            <div class="text-btn-con">
                                <div  class="default-btn text-btn"
                                    @click="details(scope.row.id)">详情</div>
                                <div  class="default-btn text-btn"
                                    @click="modify(scope.row.id)">修改</div>
                                <div  class="default-btn text-btn"
                                    @click="del(scope.row.id)">删除</div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination v-if="dataList.length" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="page.total">
            </el-pagination>
        </div>

        <!-- 新增弹窗 -->
        <cost-add v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="refreshChange"
            :months="propsSearchForm.months"
            :energyValue='propsSearchForm.energyValue'
            :isRenew='propsSearchForm.isRenew'
            :renewValue='propsSearchForm.renewValue'
            :remark='propsSearchForm.remark'
            :id="propsSearchForm.id"
        ></cost-add>
    </div>
</template>

<script>
import CostAdd from "./cost-add.vue"
export default {
    components:{ CostAdd },
    data() {
        return {
            theData: null,
            dataList: [],
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10 // 每页显示多少条
            },

            monthly: [{ //是否连续包月
                value: '1',
                label: '是'
            }, {
                value: '0',
                label: '否'
            }],


            showHide: [{ //是否显示
                value: '0',
                label: '显示'
            }, {
                value: '1',
                label: '隐藏'
            }],

            searchForm: {
                months: '', //月份
                isRenew: '',//是否连续包月
                isHide: '' //是否显示
            },
            propsSearchForm:{
                months: '',//月份
                energyValue: '', //能量值
                isRenew: '', //是否连续包月
                renewValue: '', //连续包月能量值
                remark: '', //备注
                id: '',
            },
            addOrUpdateVisible: false
        }
    },

    created() {
        this.getDataList()
    },

    methods: {
        getDataList(page, newData = false) {
            if (this.page) {
                let size = Math.ceil(this.page.total / this.page.pageSize)
                this.page.currentPage = (this.page.currentPage > size ? size : this.page.currentPage) || 1
            }
            if (newData || !this.theData) {
                this.theData = JSON.parse(JSON.stringify(this.searchForm))
            }
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/admin/ultra/group/cost/page'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({
                    current: page == null ? this.page.currentPage : page.currentPage,
                    size: page == null ? this.page.pageSize : page.pageSize
                }, this.theData))
            }).then(({ data }) => {
                this.dataList = data.records
                this.page.total = data.total
                this.dataListLoading = false
            })
        },

        //新增后回调
        refreshChange(){
            this.getDataList()
        },

        //搜索
        searchChange(newData = false) {
            this.page.currentPage = 1
            this.getDataList(this.page, newData)
        },

        //重置
        resetSearchForm() {
            this.searchForm = {}
            this.page.currentPage = 1
            this.getDataList(this.page, true) //重置表单加载初始列表
        },

        handleSizeChange(val) {
            this.page.pageSize = val
            this.getDataList()
        },
        handleCurrentChange(val) {
            this.page.currentPage = val
            this.getDataList()
        },

        // 详情
        details (e) {
            this.$http({
              url: this.$http.adornUrl('/admin/ultra/group/cost/one'),
              method: 'get',
              params: this.$http.adornParams(Object.assign({costId: e}, this.theData))
            }).then(({ data }) => {
                this.propsSearchForm.months = data.months //月份
                this.propsSearchForm.energyValue = data.energyValue //能量值
                this.propsSearchForm.isRenew = data.isRenew //是否连续包月
                this.propsSearchForm.renewValue = data.renewValue //连续包月能量值
                this.propsSearchForm.remark = data.remark //备注
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init('detail')
                })
            })
        },

        //修改
        modify(e) {
            this.$http({
                url: this.$http.adornUrl('/admin/ultra/group/cost/one'),
                method: 'get',
                params: this.$http.adornParams(Object.assign({ costId: e, }, this.theData))
            }).then(({ data }) => {
                this.propsSearchForm.months = data.months //月份
                this.propsSearchForm.energyValue = data.energyValue //能量值
                this.propsSearchForm.isRenew = data.isRenew //是否连续包月
                this.propsSearchForm.renewValue = data.renewValue //连续包月能量值
                this.propsSearchForm.remark = data.remark //备注
                this.propsSearchForm.id = data.id;
                this.addOrUpdateVisible = true;
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init('modify')
                })
            })
        },

        //新增
        addOrUpdateHandle(){
            this.addOrUpdateVisible = true;
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init('add')
            })
        },

        //删除
        del(e){
            this.$confirm('是否删除此条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http({
                    url: this.$http.adornUrl(`/admin/ultra/group/cost/${e}`),
                    method: 'delete',
                }).then(({ data }) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getDataList()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        //显示,隐藏
        isHide(val){
            this.$http({
                url: this.$http.adornUrl(`/admin/ultra/group/cost/${val.id}`),
                method: 'get',
            }).then(({ data }) => {
                this.getDataList()
            })
        },




    }
}
</script>



<style scoped></style>
